<template>
  <div>
    <div class="page-header">
      <h2>{{ title }}</h2>
    </div>
    <el-card style="max-width: 1200px; margin: 0 auto;">
      <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) => ['currentMonth', 'compareWithLastMonth', 'trend'].includes(value)
  }
});

const chartContainer = ref(null);
let chart = null;

// 根据统计类型获取标题
const title = {
  currentMonth: '本月消费统计',
  compareWithLastMonth: '与上月相比',
  trend: '总体消费趋势'
}[props.type];

// 初始化图表
const initChart = () => {
  if (chartContainer.value) {
    if (chart) {
      chart.dispose();
    }
    chart = echarts.init(chartContainer.value);

    // 根据不同的统计类型配置不同的图表选项
    let option;

    switch (props.type) {
      case 'currentMonth':
        option = getCurrentMonthOption();
        break;
      case 'compareWithLastMonth':
        option = getCompareWithLastMonthOption();
        break;
      case 'trend':
        option = getTrendOption();
        break;
      default:
        option = getDefaultOption();
    }

    chart.setOption(option);
  }
};

// 本月消费统计图表配置
const getCurrentMonthOption = () => ({
  title: {
    text: '本月各分类消费占比',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '消费金额',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 350, name: '餐饮' },
        { value: 200, name: '交通' },
        { value: 400, name: '购物' },
        { value: 250, name: '娱乐' },
        { value: 150, name: '医疗' },
        { value: 300, name: '教育' },
        { value: 200, name: '旅游' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

// 与上月相比图表配置
const getCompareWithLastMonthOption = () => ({
  title: {
    text: '本月与上月消费对比',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['本月', '上月'],
    bottom: 10
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['餐饮', '交通', '购物', '娱乐', '医疗', '教育', '旅游']
  },
  series: [
    {
      name: '本月',
      type: 'bar',
      data: [350, 200, 400, 250, 150, 300, 200],
      itemStyle: {
        color: '#409eff'
      }
    },
    {
      name: '上月',
      type: 'bar',
      data: [300, 250, 350, 200, 180, 250, 220],
      itemStyle: {
        color: '#67c23a'
      }
    }
  ]
});

// 总体消费趋势图表配置
const getTrendOption = () => ({
  title: {
    text: '近6个月消费趋势',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['总消费'],
    bottom: 10
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '总消费',
      type: 'line',
      stack: '总量',
      data: [1850, 2100, 1950, 2200, 2050, 2300],
      smooth: true,
      itemStyle: {
        color: '#f56c6c'
      },
      areaStyle: {
        opacity: 0.3
      }
    }
  ]
});

// 默认图表配置
const getDefaultOption = () => ({
  title: {
    text: '消费统计'
  },
  tooltip: {},
  legend: {
    data: ['消费金额']
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {},
  series: [{
    name: '消费金额',
    type: 'bar',
    data: [230, 340, 280, 310, 260, 380, 290]
  }]
});

// 监听类型变化，重新初始化图表
watch(() => props.type, () => {
  nextTick(() => {
    initChart();
  });
});

// 组件挂载时初始化图表
onMounted(() => {
  initChart();
});
</script>

<style scoped>
.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #409eff;
}

.page-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}
</style>